<template>
  <div>
    <div>
      <el-input
        v-model="filterText"
        placeholder="请输入名称"
        clearable
        style="width: calc(100% - 30px); margin: 10px 15px 10px 10px"
      >
        <i slot="suffix" class="el-icon-search el-input__icon"></i>
      </el-input>
    </div>
    <el-tree
      ref="tree"
      :data="dataSource"
      :node-key="nodeKey"
      :current-node-key="currentNodeKey"
      :props="defaultProps"
      highlight-current
      :default-expand-all="defaultExpandAll"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      :default-expanded-keys="defaultExpandKey"
      :default-checked-keys="defaultCheckKey"
      @node-click="clickNodeChange"
    >
      <!--      :render-content="renderContent">-->
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>
          <!--            <svg-icon v-if="data.objectType === 'title'" :icon-class="titleIcon"></svg-icon>-->
          <svg-icon :icon-class="getIcon(data[objectType])"></svg-icon>
          <span style="margin-left: 15px">{{ node.label }}</span>
        </span>

        <!--           下拉菜单-->
        <!--         <span v-if="data.objectType === 'classify'" align="right">-->
        <!--          <el-dropdown style='align: right' trigger="click">-->
        <!--              <span class="el-dropdown-link">-->
        <!--              <i class="el-icon-more"></i>-->
        <!--              </span>-->
        <!--              <el-dropdown-menu slot="dropdown">-->
        <!--              <el-dropdown-item>创建计算项目</el-dropdown-item>-->
        <!--            </el-dropdown-menu>-->
        <!--            </el-dropdown>-->
        <!--         </span>-->
      </span>
    </el-tree>
  </div>
</template>

<script>
  export default {
    props: {
      /*结构树数据源*/
      dataSource: {
        type: Array,
        required: true,
        default: () => [],
      },
      /* key */
      nodeKey: {
        type: String,
        default: 'id',
      },
      defaultProps: {
        type: Object,
        required: true,
      },
      /* 默认展开的节点 */
      defaultExpandKey: {
        type: Array,
        default: () => [],
      },
      /* 默认选中的节点 */
      defaultCheckKey: {
        type: Array,
        default: () => [],
      },
      /* 当前选中的节点 */
      currentNodeKey: {
        type: String,
        default: '',
      },
      /* 是否默认打开所有节点 */
      defaultExpandAll: {
        type: Boolean,
        default: false,
      },
      /* 默认节点图标 */
      defaultIcon: {
        type: String,
        default: 'flow6',
      },
      /* 所有类型对应的图标 */
      icon: {
        type: Object,
        default: () => {
          return {
            title: 'table', //类型名称：图标
            guide: 'flow7',
            classify: 'flow6',
            model: 'model',
          }
        },
      },
      /* 区分节点类型字段 */
      objectType: {
        type: String,
        default: 'objectType',
      },
    },
    data() {
      return {
        filterText: '',
        iconClass: '',
        classify: 'model-corner',
        model: 'model',
      }
    },
    watch: {
      filterText(val) {
        this.$refs.tree.filter(val)
      },
      //设定当前被选中的节点
      currentNodeKey: function (newValue, oldValue) {
        this.$refs.tree.setCurrentKey(newValue)
      },
    },
    methods: {
      // 点击节点选中事件 --- 点击时间就得到选中的节点（点击动作就意味着选中 check-on-click-node ）
      clickNodeChange(clickData) {
        // 将选中的节点传回父组件
        this.$emit('change', clickData)
        // debugger;
        // console.log("tree 传值给 父组件");
      },

      // 搜索过滤
      filterNode(value, data) {
        if (!value) return true
        return data.name.indexOf(value) !== -1
      },
      //获取图标
      getIcon: function (objectType) {
        if (this.icon[objectType] == undefined) {
          return this.defaultIcon
        }
        return this.icon[objectType]
      },

      // 自定义显示函数 后期可改为父组件传入的方式
      // renderContent(h, {node, data, store}){
      //   if (data.objectType === 'classify') {
      //     return (<span class="custom-tree-node">
      //       <svg-icon icon-class="flow5"></svg-icon>
      //       <span style="margin-left: 15px;">{node.label}</span>
      //       </span>);
      //   } else {
      //     return (<span class="custom-tree-node">
      //       <svg-icon icon-class="flow5"></svg-icon>
      //       <span style="margin-left: 15px;">{node.label}</span>
      //       </span>);
      //   }
      // }
    },
  }
</script>
